<template>
	<!-- 搜索框 -->
	<view class="diy-search">
		<view class="inner" :class="itemStyle.searchStyle" @click="clickFunc">
			<text class="search-icon iconfont icon-search"></text>
			<input placeholder-style="color:#bbb;font-size:12px;" type="text" :placeholder="params.placeholder" />
			<view class="search_btn">搜索</view>
		</view>
	</view>
</template>

<script>
export default {
	/**
	 * 组件的属性列表
	 * 用于组件自定义设置
	 */
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object
	},

	/**
	 * 组件的方法列表
	 * 更新属性和数据的方法与更新页面数据的方法类似
	 */
	methods: {
		/**
		 * 跳转到搜索页面
		 */
		onTargetSearch() {
			this.$navTo('pages/search/index')
		},
		clickFunc() {
			this.$navTo('pagesA/search/index')
		}
	}
}
</script>

<style lang="scss" scoped>
.diy-search {
	background: #f1f1f2;
	// font-size: 26rpx;
	width: 706rpx;
	height: 68rpx;
	margin: 0 auto;
	border-radius: 68rpx;
	overflow: hidden;
	margin-bottom: 14rpx;
}

.inner {
	height: 68rpx;
	background: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: 2px solid #f95513;
	padding: 0 20rpx;
	position: relative;
	&.radius {
		border-radius: 10rpx;
	}

	&.round {
		border-radius: 68rpx;
	}
	.search-icon {
		margin-right: 8rpx;
		color: #f95513;
		font-weight: bold;
	}
	.search_btn {
		width: 102rpx;
		height: 48rpx;
		background: #a2ff00;
		border-radius: 24rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 10px;
		color: #010101;
		line-height: 48rpx;
		text-align: center;
		position: absolute;
		right: 8rpx;
	}
}

.search-input {
	height: 60rpx;
	line-height: 60rpx;
	color: #999;
	padding: 0 20rpx;
}
</style>
